<template>
  <view class="container">
    <up-navbar
      :title="formData.id ? '编辑地址' : '新增地址'"
      leftIcon="arrow-left"
      placeholder
      @clickLeft="goBack"
    ></up-navbar>

    <view class="form-container">
      <up-form :model="formData" ref="formRef">
        <up-form-item label="收货人" prop="name" required>
          <up-input v-model="formData.name" placeholder="请输入收货人姓名" />
        </up-form-item>

        <up-form-item label="手机号码" prop="phone" required>
          <up-input
            v-model="formData.phone"
            placeholder="请输入手机号码"
            type="number"
            maxlength="11"
          />
        </up-form-item>

        <up-form-item label="所在地区" prop="region" required>
          <up-input
            v-model="formData.region"
            disabled
            disabledColor="#ffffff"
            placeholder="请选择所在区域"
            border="none"
          ></up-input>
          <template #right>
            <up-icon name="arrow-right" @click="reginShow = true"></up-icon>
          </template>
        </up-form-item>
        <up-picker :show="reginShow" mode="region" @change="onRegionChange" />
        <up-form-item label="详细地址" prop="detail" required>
          <up-textarea
            v-model="formData.detail"
            placeholder="街道、楼牌号等"
            height="80"
          />
        </up-form-item>

        <up-form-item label="设为默认" prop="isDefault">
          <up-switch v-model="formData.isDefault" />
        </up-form-item>
      </up-form>

      <view class="submit-btn">
        <up-button type="primary" @click="submitForm" :loading="loading"
          >保存地址</up-button
        >
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { onLoad } from "@dcloudio/uni-app";
import { ref } from "vue";

interface AddressForm {
  id?: number;
  name: string;
  phone: string;
  region: string[];
  province: string;
  city: string;
  district: string;
  detail: string;
  isDefault: boolean;
}

const formRef = ref();
const loading = ref(false);
const reginShow = ref(false);
const formData = ref<AddressForm>({
  name: "",
  phone: "",
  region: [],
  province: "",
  city: "",
  district: "",
  detail: "",
  isDefault: false,
});

onLoad((options) => {
  if (options?.id) {
    // 编辑模式，加载地址数据
    loadAddressData(Number(options.id));
  }
});

function loadAddressData(id: number) {
  // 模拟数据，实际项目中替换为API请求
  const mockData = {
    id: 1,
    name: "张三",
    phone: "13800138000",
    region: ["北京市", "北京市", "朝阳区"],
    province: "北京市",
    city: "北京市",
    district: "朝阳区",
    detail: "建国路88号",
    isDefault: true,
  };
  formData.value = mockData;
}

function onRegionChange(e: any) {
  const [province, city, district] = e.value;
  formData.value.province = province;
  formData.value.city = city;
  formData.value.district = district;
}

function submitForm() {
  formRef.value.validate((valid: boolean) => {
    if (valid) {
      loading.value = true;
      // 模拟API请求
      setTimeout(() => {
        uni.showToast({
          title: "保存成功",
          icon: "success",
        });
        loading.value = false;
        setTimeout(() => {
          uni.navigateBack();
        }, 1500);
      }, 1000);
    }
  });
}

function goBack() {
  uni.navigateBack();
}
</script>

<style lang="scss" scoped>
.container {
  padding-bottom: 30rpx;
}

.form-container {
  padding: 30rpx;

  .submit-btn {
    margin-top: 60rpx;
  }
}
</style>
